<!--
 * @Descripttion: 
 * @version: 
 * @Author: Garrison
 * @Date: 2024-03-23 19:08:45
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-04-10 11:12:45
-->
<template>
  <a-row>
    <a-col :span="5" :push="19"
      ><div
        style="
          margin-left: 20px;
          padding: 8px;
          background-color: rgb(255, 255, 255);
        "
      >
        <h3 style="margin-left: 10px">标签</h3>
        <a-button
          v-for="item in tagsList.values"
          :key="item"
          @click="searchByTag(item)"
          style="font-size: 10px; height: 24px; margin: 3px"
          >{{ item["tagName"] }}</a-button
        >
      </div></a-col
    >
    <a-col :span="19" :pull="5"
      ><div>
        <div
          style="
            height: 50px;
            width: 100%;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            padding: 8px;
            align-items: center;
          "
        >
          <h1>问题列表</h1>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 8px">
              <a-dropdown placements="bottomLeft">
                <a class="ant-dropdown-link" @click.prevent>
                  难度
                  <DownOutlined />
                </a>
                <template #overlay>
                  <a-menu
                    style="width: 100px; text-align: center; margin-top: 8px"
                  >
                    <a-menu-item
                      v-for="item in problemDifficulty"
                      :key="item"
                      @click="searchByProblemDifficulty(item)"
                    >
                      <a>{{ item["name"] }}</a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <a-input-search
              v-model:value="searchValue"
              placeholder="input search text"
              style="width: 200px"
              @search="searchByProblemInfo"
            />
            <a-button
              style="margin-left: 8px"
              type="primary"
              @click="initPageByButton"
              >重置</a-button
            >
          </div>
        </div>
        <vxe-table
          stripe
          :data="tableData"
          :cell-style="{ 'text-align': 'center', cursor: 'pointer' }"
          :header-cell-style="{ 'text-align': 'center' }"
          :row-config="{ isHover: true }"
          @cell-click="toProblemInfo"
        >
          <vxe-column field="problemId" title="#" width="60"></vxe-column>
          <vxe-column field="displayId" title="level"></vxe-column>
          <vxe-column field="title" title="Problem"></vxe-column>
          <vxe-column field="difficulty" title="difficulty"></vxe-column>
          <vxe-column
            field="submissionNumber"
            title="submissionNumber"
            show-overflow
          ></vxe-column>
          <vxe-column field="rate" title="Rate" show-overflow></vxe-column>
        </vxe-table>
        <vxe-pager
          background
          v-model:current-page="pageVO.currentPage"
          v-model:page-size="pageVO.pageSize"
          :total="pageVO.total"
          :layouts="[
            'Home',
            'PrevJump',
            'PrevPage',
            'JumpNumber',
            'NextPage',
            'NextJump',
            'End',
            'Sizes',
            'FullJump',
            'Total',
          ]"
          @page-change="changePage"
        >
        </vxe-pager></div
    ></a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import {
  ProblemControllerService,
  TagControllerService,
} from "../../generated";
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { DownOutlined } from "@ant-design/icons-vue"; //下拉框

/**
 * @name: rete中间函数的抽离
 * @return Array
 */
const rateCompute = (tableData, data) => {
  const requestArr = [];
  let len = data.length;
  requestArr.values = data;
  for (let i = 0; i < len; i++) {
    if (requestArr.values[i].acceptedNumber === 0)
      tableData.value[i].rate = "0.00%";
    else
      tableData.value[i].rate =
        Math.round(
          (requestArr.values[i].acceptedNumber /
            requestArr.values[i].submissionNumber) *
            10000
        ) /
          100 +
        "%";
  }
  return tableData.value;
};
const router = useRouter();
/**
 * @name: 问题列表标头搜索框处理
 */
const searchValue = ref("");
const searchByProblemInfo = async () => {
  problemsRequest.keyWord = searchValue.value;
  const res = await ProblemControllerService.listProblemByUserUsingPost(
    problemsRequest
  );
  if (res.code === 0) {
    tableData.value = res.data.data;
    tableData.value = rateCompute(tableData, res.data.data);
    pageVO.total = res.data?.totalNum;
    pageVO.currentPage = res.data?.currentPage ?? 1;
  }
};
/**
 * @name: 根据题难度搜索题目(下拉框)
 * @return Array
 */
const problemDifficulty = [
  { name: "低", difficulty: "Low" },
  { name: "中", difficulty: "Mid" },
  { name: "高", difficulty: "High" },
];
const searchByProblemDifficulty = async (item) => {
  console.log(item);
  problemsRequest.difficulty = item.difficulty;
  const res = await ProblemControllerService.listProblemByUserUsingPost(
    problemsRequest
  );
  if (res.code === 0) {
    tableData.value = res.data.data;
    tableData.value = rateCompute(tableData, res.data.data);
    pageVO.total = res.data?.totalNum;
    pageVO.currentPage = res.data?.currentPage ?? 1;
  }
};
/**
 * @name: 重置搜索状态
 */
const initPageByButton = () => {
  searchValue.value = "";
  problemsRequest.keyWord = "";
  problemsRequest.difficulty = "";
  problemsRequest.tagId = null;
  initPage();
};
/**
 * @name: 问题列表渲染接口
 */
interface RowVO {
  problemId: number;
  displayId: string;
  title: string;
  difficulty: string;
  submissionNumber: number;
  rate: string;
  // address: string;
}
const tableData = ref<RowVO[]>([]);
/**
 * @name: 问题列表初始化
 * @return {*}
 */
const initPageRequest = {
  current: 1,
  pageSize: 10,
  sortField: "",
  sortOrder: "",
  keyWord: "",
  difficulty: "",
  tagId: null,
};
const problemsRequest = {
  current: 1,
  pageSize: 10,
  sortField: "",
  sortOrder: "",
  keyWord: "",
  difficulty: "",
  tagId: null,
};
/**
 * @name: 加载问题列表
 * @test: test font
 * @msg:
 * @return {*}
 */

const loadProblemsList = async () => {
  const res = await ProblemControllerService.listProblemByUserUsingPost(
    problemsRequest
  );
  if (res.code === 0) {
    tableData.value = res.data.data;
    tableData.value = rateCompute(tableData, res.data.data);
  } else {
    alert("加载失败");
  }
};
/**
 * @name: 实现标签点击搜索
 * @return {Array}
 */
const searchByTag = async (item) => {
  problemsRequest.tagId = item["tagId"];
  const res = await ProblemControllerService.listProblemByUserUsingPost(
    problemsRequest
  );
  console.log(res.data.data);
  if (res.code === 0) {
    tableData.value = res.data.data;
    tableData.value = rateCompute(tableData, res.data.data);
    pageVO.total = res.data?.totalNum;
    pageVO.currentPage = res.data?.currentPage ?? 1;
  }
};
const pageVO = reactive({
  //分页变量
  currentPage: 0,
  pageSize: 10,
  total: 0,
});
/**
 * @name: 页面请求初始化
 */

const initPage = async () => {
  const res = await ProblemControllerService.listProblemByUserUsingPost(
    initPageRequest
  );
  if (res.code === 0) {
    tableData.value = res.data.data;
    console.log(res.data.data);
    pageVO.total = res.data?.totalNum;
    pageVO.currentPage = res.data?.currentPage ?? 1;
    tableData.value = rateCompute(tableData, res.data.data);
  } else {
    alert("加载失败");
  }
};
/**
 * @name: 分页操作
 * @return {*}
 */
const changePage = ({
  currentPage,
  pageSize,
}: {
  currentPage: any;
  pageSize: any;
}) => {
  problemsRequest.current = currentPage;
  problemsRequest.pageSize = pageSize;
  loadProblemsList();
};
initPage();
/**
 * @name: 加载右布局标签
 * @return {*}
 */
const tagsList = reactive([]);
const loadTags = async () => {
  const res = await TagControllerService.getUsingGet();
  console.log(res.data);
  if (res.code === 0) {
    tagsList.values = res.data;
  } else {
    alert("记载出错了o(╥﹏╥)o");
  }
};
// 选中标签
const selectTag = () => {
  return true;
};
// 前往问题详情页
const toProblemInfo = ({ row }) => {
  console.log(row);
  router.push({
    path: '/problemInfo',
    query: {
      problemId: row.problemId
    }
  });
};
onMounted(() => {
  initPage();
  loadTags();
});
</script>
<style>
.vxeTable:hover {
  cursor: pointer;
}
</style>
